<template>
    <view class="fly-textarea">
            <view class="title" v-if="label">
                <text>{{label}}</text>
            </view>
            <view class="content">
                <view class="text" v-if="!is_focus" @tap="showTextarea">
                    {{inputValue == '' ? '请输入内容' : inputValue}}
                </view>
                <textarea
                    v-else
                    :disabled="disabled"
                    fixed="true"
                    class="textarea"
                    v-model="inputValue"
                    placeholder="请输入"
                    :focus="is_focus"
                    @blur="hideTextarea"
                    @input="handleInput"
                />
            </view>
    </view>
</template>

<script>
export default {
    props: {
        label:{
            type: String,
        },
        value: String,
        disabled: Boolean,
    },
	data(){
		return {
            inputValue: '',
            is_focus: false,
		}
	},
	mounted(){
		this.inputValue = this.value;
	},
	watch:{
		inputValue(val){
			this.$emit('update:value', val);
		}
	},
    methods: {
        handleInput(event) {
            this.$emit('input', this.value)
        },
        showTextarea(){
            this.is_focus = true;
        },
        hideTextarea(){
            this.is_focus = false;
        }
    },
}
</script>
